import lessModule from "./index.module.less"
import warnImage from "../../../../../../../../assets/image/panoramicMonitoringPage-warn.png"
import closeImage from "../../../../../../../../assets/image/homePage-close.png"
import { $eventBus, $EventBus_off, $EventBus_on } from "../../../../../../../../common/utils"
import { useEffect, useState } from "react"
import { Table } from "antd"

// 主页-全景监控页面-浮层组件-消息组件
interface componentInterface {
sourceList:Array<object>
}
const HomePage_PanoramicMonitoringPage_LayerComponent_MessageComponent: React.FC<componentInterface> = (props) => {
  const columnList = [
    {
      title: '序号',
      width: 46,
      render: (text: string, record: object, idx: number) => idx + 1,
    },
    {
      title: '时间',
      dataIndex: 'startTime',
      render: (text: string) => text ?? "-"

    },
    {
      title: '监测主变',
      dataIndex: 'warningName',
      render: (text: string) => text ?? "-"

    },
    {
      title: '等级',
      dataIndex: 'warningLevel',
      width: 46,
      render: (text: string) => <span style={{ color: text === "一级" ? "#FF4D4F" : text === "二级" ? "#FAAD14" : "" }}>{text ?? "-"}</span>,
    },
  ]
  const [isDetail, setIsDetail] = useState<boolean>(false)
  const [absoluteBottom, setAbsoluteBottom] = useState<number>(41)


  // 广播函数数据
  const eventBusFuncData = {
    timeAxis_isShow: (data: object) => {
      setAbsoluteBottom(data ? 91 : 41)
    },
  }

  useEffect(() => {
    $EventBus_on(eventBusFuncData)
    // 销毁
    return () => {
      $EventBus_off(eventBusFuncData)
    }
  }, [])
  const className_tableRow = (record: object, idx: number) => {
    return idx % 2 ? `${lessModule["homePagePanoramicMonitoringPageLayerComponentMessageComponent-detail-tableRow"]}` : ""
  }

  return (
    <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentMessageComponent"]} style={{ bottom: absoluteBottom + (isDetail ? 29 : 0) }}>
      {
        !isDetail ? <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentMessageComponent-btn"]} style={{ cursor: props.sourceList.length ? "pointer" : "not-allowed" }} onClick={() => { setIsDetail(props.sourceList.length ? !isDetail : false) }}>{props.sourceList.length ? props.sourceList.length < 100 ? props.sourceList.length : "99+" : 0}</div>
          : <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentMessageComponent-detail"]}>
            <header className={lessModule["homePagePanoramicMonitoringPageLayerComponentMessageComponent-detail__header"]}>
              <div className={lessModule["detail-header__title"]}>
                <img src={warnImage} />
                <span>未确认的预警（{props.sourceList.length}条）</span>
              </div>
              <img className="homePage-handleImage" src={closeImage} onClick={() => { setIsDetail(!isDetail) }} />
            </header>
            <Table rowKey={(record, idx) => "record.name" + idx} columns={columnList} rowClassName={className_tableRow} dataSource={props.sourceList} rowHoverable={false} pagination={false} scroll={{ y: 87 }} />
          </div>

      }
    </div>
  )
}



export default HomePage_PanoramicMonitoringPage_LayerComponent_MessageComponent